<template>
	<view class="income-details-wrap">
		<view class="topVue">
			<view class="status"></view>
			<view class="navVue">
				<image src="../../static/imgs/back.png" style="width: 36rpx; height: 36rpx;" @click="backFun"></image>
				
				<view class="nav-title">查看收益</view>
				<view style="width: 36rpx; height: 36rpx;"></view>	
			</view>
		</view>
		
		<view class="place"></view>

		<view class="info-box">
			<p class="account">{{ total }}</p>
			<p>{{$t('累计收益')}}(USDT)</p>
		</view>
		
		<view class="item" v-for="(item, index) in list" :key="index">
			<view>时间：{{ item.createTime }}</view>
			<view>数量：{{ item.amount }}</view>
			<view>价格：{{ item.price }}</view>
			<view>资金：{{ item.principal }}</view>
			<view>收益：{{ item.profit }}</view>
			<view>收益率：{{ item.profitRate }}%</view>
		</view>
		<!-- <view class="data-box">
			<view class="search-box">
				<view class="tab-box">
					<view class="tab-item" v-for="item in tabList" :key="item.label">
						{{ item.label }}
					</view>
				</view>
			</view>
			<view class="listbox" v-if="list.length">
				<view class="tab-box" v-for="(item, index) in list" :key="index">
					<text>{{ item.createTime }}</text>
					<text>{{ item.amount }}</text>
					<text>{{ item.price }}</text>
					<text>{{ item.principal }}</text>
					<text>{{ item.profit }}</text>
					<text>{{ item.profitRate }}%</text>
				</view>
			</view>
			<view class="content" v-else>
				<img src="../.../../../static/imgs/empty.png" alt="" />
				<p>～{{$t('这里空空如也')}}～</p>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				list: [],
				total: 0
			};
		},
		computed: {
			tabList() {
				return [{
						label: this.$t("时间"),
					},
					{
						label: this.$t("数量"),
					},
					{
						label: this.$t("价格"),
					},
					{
						label: this.$t("资金"),
					},
					{
						label: this.$t("收益"),
					},
					{
						label: this.$t("收益率"),
					},
				]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getList()
			}else{
				this.getList1()
			}
		},
		methods: {
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			getList() {
				this.$http.post(`/front/trade/profitLog?id=${this.id}`).then(res => {
					if (res.code == 0) {
						this.list = res.obj.list;
						this.total = res.obj.total;
						console.log("nnnnnnnnn", this.list)
					}
				})
			},
			getList1() {
				this.$http.post(`/front/trade/profitLog`).then(res => {
					if (res.code == 0) {
						this.list = res.obj.list;
						this.total = res.obj.total;
						console.log("nnnnnnnnn", this.list)
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.item {
		width: 690rpx;
		background: #f5f5f5;
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		padding: 30rpx;
		box-sizing: border-box;
		text {
			font-size: 28rpx;
			line-height: 1;
		}
	}
	.income-details-wrap {
		.place {
			height: calc(var(--status-bar-height) + 92rpx);
		}
		
		.topVue {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;
		
			.status {
				width: 100%;
				height: var(--status-bar-height);
			}
		
			.navVue {
				width: 100%;
				height: 92rpx;
				background: linear-gradient(to right, #FFFBFF, #FFE7F4);
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;
		
				.nav-title {
					width: 420rpx;
					height: 92rpx;
					font-size: 36rpx;
					color: #04094C;
					text-align: center;
					line-height: 92rpx;
				}
			}
		}

		.info-box {
			width: 690rpx;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: #f5f5f5;
			margin: 20rpx auto 0;
			border-radius: 10rpx;
			p {
				text-align: center;
				color:#333;
				font-size: $uni-font-size-26;
				font-family: PingFang SC;
				font-weight: 400;
			}

			.account {
				font-size: $uni-font-size-50;
				margin-bottom: 20rpx;
			}
		}

		.data-box {
			width: 100%;
			height: calc(100vh - 310rpx);
			border-radius: 30rpx 30rpx 0 0;
			background-color: #fff;
			box-sizing: border-box;
			padding: 0 25rpx;

			.search-box {
				width: 100%;
				height: 210rpx;
				// border-bottom: 2rpx solid #343547;

				.tab-box {
					width: 100%;
					height: 78rpx;
					display: flex;
					font-size: $uni-font-size-30;
					font-family: PingFang SC;
					font-weight: 300;
					color: #333;
					justify-content: space-between;

					.tab-item {
						padding: 0 20rpx;
						// margin-top: 110rpx;
					}
				}
			}

			.listbox {
				.tab-box {
					width: 100%;
					margin: 20rpx 0;
					display: flex;
					font-size: $uni-font-size-30;
					font-family: PingFang SC;
					font-weight: 300;
					color: #333;
					justify-content: space-between;
					align-items: center;

					text {
						flex: 1;
						text-align: center;
						padding: 0 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.content {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				img {
					width: 276rpx;
					height: 269rpx;
					margin-top: 276rpx;
					margin-bottom: 50rpx;
				}

				p {
					text-align: center;
					font-size: $uni-font-size-24;
					font-family: PingFang SC;
					font-weight: 300;
					color: $uni-text-color-grey;
				}
			}
		}
	}
</style>